<template>
    <div>
        <div class="bai" >
                <el-form ref="form" :rules="rules"  :model="form" label-width="80px">
                <el-form-item label="医生头像" prop="head">
                <el-upload
                    class="avatar-uploader"
                    action="http://39.104.164.55/upload"
                    name='uploadFile'
                    multiple
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                </el-form-item>
                <el-form-item label="医师名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                 <el-form-item label="科室" prop="nameone">
                    <el-input v-model="form.nameone"></el-input>
                </el-form-item>
                 <el-form-item label="挂号费" prop="nameto">
                    <el-input v-model="form.nameto"></el-input>
                </el-form-item>
                <el-form-item label="医师职称">
                    <el-select v-model="form.region" placeholder="请选择">
                    <el-option label="主任医师" value="主任医师"></el-option>
                    <el-option label="副主任医师" value="副主任医师"></el-option>
                    <el-option label="主治医师" value="主治医师"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="擅长疾病" prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="医生介绍" prop="descon">
                    <el-input type="textarea" rows="5" v-model="form.descon"> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
                </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
               
                imageUrl:"",
                urls:[],
                form: {
                    dialogImageUrl: '',
                    dialogVisible: false,
                    head:"",
                    name:"",
                    region:"",
                    desc:"",
                    descon:"",
                    nameone:"",
                    nameto:""
                },
                 rules:{
                    name: [
                        { required: true, message: '请输入医师名称', trigger: 'blur' },
                    ],
                    desc: [
                        { required: true, message: '请输入擅长疾病', trigger: 'blur' },
                    ],
                    descon: [
                        { required: true, message: '请输入医生介绍', trigger: 'blur' },
                    ],
                    nameone: [
                        { required: true, message: '请输入医师科室', trigger: 'blur' },
                    ],
                    nameto: [
                        { required: true, message: '请输入医师挂号费', trigger: 'blur' },
                    ],
                },
                
            }
        },
        methods: {
            onSubmit() {
                if(this.form.head=='' ||this.form.name==''||this.form.region==''|| this.form.desc==''|| this.form.nameone==''|| this.form.nameto==''){
                   this.$alert('内容不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                        type: 'info',
                        message: `action: ${ action }`
                        });
                    }
                    });
                    return
                }

                let url = `/ht_inserdoctor`
                let x = `head=${this.form.head}&dname=${this.form.name}&lv=${this.form.region}&strong=${this.form.desc}&cid=1&pingfen="暂无&kshi=${this.form.nameone}&price=${this.form.nameto}"`
                this.axios.post(url,x).then(res=>{
                    console.log(res);
                })  
                this.onSubmitOn()


            },
                onSubmitOn(){
                    let url  = `/ht_details`
                    let x = `introduce=${this.form.descon}`
                    this.axios.post(url,x).then(res=>{
                        console.log(res);
                    })  
                   this.$message({
                    message: '恭喜你，提交医师成功',
                    type: 'success'
                    });
                    this.form.head=''
                    this.form.name=''
                    this.form.nameone=''
                    this.form.nameto=''
                    this.form.region=''
                    this.form.desc=''
                    this.form.descon=''
                    this.imageUrl=''
                },
            

            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.head = res.urls
                console.log(res.urls);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
            }

          
       
    }
</script>

<style lang="scss" scoped>
.bai{
  background-color: #fff;
  height: calc(100vh - 100px);
    box-shadow:0px 0px 10px #ccc;
     border-radius: 7px;
       overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  .el-form{
    padding: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.el-form{
    width: 30vw;
}
::v-deep .el-upload{
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
::v-deep .el-textarea__inner{
    resize:none;
}
</style>